<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="./css.css" />
<script type="text/javascript" src="./jquery-3.6.0.js"></script>
<script type="text/javascript">

	
	
</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
<script>

	var DeleteFun=function(){
		var $root=$(this).parent().parent();

		var red=confirm("你确定要删除"+$root.children().first().text()+"？");
		if(red)
		{
			$root.remove();
		}
		// return fasle;
	}
	//
	$("a").click(DeleteFun);
	$("#addEmpButton").click(
		function(){
			var name=$("input[name='empName']");
			var email=$("input[name='email']");
			var salary=$("input[name='salary']");
			console.log(name.val())
			var addTable="<tr>"+
			"<td>"+name.val()+"</td>"+
			"<td>"+email.val()+"</td>"+
			"<td>"+salary.val()+"</td>"+
			"<td>"+"<a href='javascript:;'>Delete</a></td>"+
		"</tr>";
			$(addTable).appendTo($("#employeeTable"));
			$("#employeeTable >tbody> tr:last a").click(DeleteFun);
			name.val("");
			email.val("");
			salary.val("");
		}

	)

</script>
</html>
